<template>
	<view class="manage">
		<u-tabs :list="items" :is-scroll="false" :current="current" @change="change" active-color="#EB702D"></u-tabs>
		<view class="content">
			<view>
				<view class="one">
					<block v-for="(item,index) of list" :key="index">
						<view class="container" v-if="item.state!=current">
							<view class="pic">
								<image :src="item.thumbimage" v-if="item.thumbimage.indexOf('http') != -1" mode="aspectFill"></image>
								<image :src="'https://fucaiji.yiyunvip.top'+item.thumbimage" v-else mode="aspectFill"></image>
							</view>
							<view class="desc">
								<view class="title">
									<view class='title_l'>{{item.name}}</view>
								</view>
								<view class="price">¥ {{item.vprice}} <span class="ml5"
										style="color: #999;text-decoration: line-through;font-weight: 500;">¥
										{{item.price}}</span> </view>
								<view class="kc">
									<view>库存：{{item.kucun}}</view>
									<view class="xiaol">销量：{{item.num}}</view>
								</view>
								<view class="btn">
									<view class="btn_01" @click="jump_edit(item.id)">编辑</view>
									<view class="btn_01" @click="pull(item.id,1)" v-if="item.is_sj==1">下架</view>
									<view class="btn_01" @click="pull(item.id,0)" v-if="item.is_sj==0">上架</view>
									<view class="btn_01" @click="del(item.id)">删除</view>
								</view>
							</view>
						</view>
					</block>

					<view class="tjsp">
						<navigator url="/pages/shangjia/edit/product/product">
							<view class="flex flex-direction">
								<button class="">添加商品</button>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view style="height:100px;"></view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				list: [],
				items: [{
					name: '上架商品',
					status: 1
				}, {
					name: '下架商品',
					status: 0
				}],
				page: 0,
				s_id: "",
				pagesize: 10,
				current: 0,
				status: 1
			}
		},
		onShow() {
			this.page = 0
			this.list = []
			this._request()
		},
		onReachBottom() {
			this._request()
		},
		methods: {
			_request() {
				var that = this;
				this.global.request.post({
					data: {
						do: 'goods',
						op: 'goodslist',
						s_id: uni.getStorageSync("s_id"),
						page: this.page,
						status: this.status,
						pagesize: this.pagesize,
					},
					success: res => {
						that.list = that.list.concat(res)
						that.page = that.page + 1
					}
				})
			},
			pull(id, status) {
				const that = this
				var title = status == 1 ? '确定下架？' : '确定上架？';
				uni.showModal({
					title: title,
					success(res) {
						if (res.confirm == true) {
							that.global.request.post({
								data: {
									do: 'goods',
									op: 'statusGoods',
									id: id,
									status: status,
								},
								success: res => {
									that.list = []
									that.page = 0
									that._request()
								}
							})

						}
					}
				})
			},
			del(id) {
				const that = this
				uni.showModal({
					title: '确定删除？',
					success(res) {
						if (res.confirm == true) {
							that.global.request.post({
								data: {
									do: 'goods',
									op: 'goodsdel',
									id: id,
								},
								success: res => {
									that.list = []
									that.page = 0
									that._request()
								}
							})
						}
					}
				})
			},
			jump_edit(id) {
				uni.navigateTo({
					url: '/pages/shangjia/edit/product/product?id=' + id
				})
			},
			change(index) {
				this.current = index;
				this.status = this.items[index].status
				this.list = []
				this.page = 0
				this._request()
			}
		}
	}
</script>

<style lang="less">
	.manage {
		.one {
			.container {
				display: flex;
				flex-direction: row;
				border-bottom: 1px solid #F2F2F2;
				justify-content: space-between;
				height: 280rpx;
				padding: 5px 11px;
				margin: 0 0 10px;
				background: #fff;

				.pic {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 25%;
					height: 100%;
					vertical-align: middle;
				}

				.pic image {
					width: 100%;
					height: 80%;
					border-radius: 10rpx;
				}

				.desc {
					color: #8B8B8B;
					width: 70%;
					padding: 20rpx;
					text-align: left;
					font-size: 12px;

					.title {
						display: flex;
						flex-wrap: wrap;
					}

					.title_l {
						font-weight: bold;
						color: #333;
						height: 36px;
						overflow: hidden;
						font-size: 14px;
						line-height: 18px;
					}

					.price {
						color: #ff0000;
						font-size: 16px;
						font-weight: 900;
					}

					.kc {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						line-height: 50rpx;

						.xiaol {
							color: #8B8B8B;
						}
					}

					.btn {
						display: flex;
						justify-content: flex-end;

						.btn_01 {
							border: 1px solid #8B8B8B;
							border-radius: 3px;
							text-align: center;
							margin-left: 10px;
							padding: 3px 8px;
						}
					}
				}
			}

			.tjsp {
				padding: 0 30rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				box-sizing: border-box;
				z-index: 99;
				background-color: #fff;

				.tjsp_btn {
					background-color: #E5E5E5;
					padding: 10px;
					text-align: center;
					border-radius: 20px;
					background-color: #DF421D;
					color: #fff;
					width: 100%;
				}
			}

		}
	}

	button {
		width: 92%;
		background-color: #EB702D;
		color: white;
		position: fixed;
		bottom: 0;
		margin-bottom: 20rpx;
	}
</style>
